@font-face {
  font-display: block;
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  src: url('../fonts/Inter.woff2') format('woff2');
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  tab-size: 4;
}

body,
html,
#app {
  width: 100%;
  height: 100%;
}

#app {
  background-color: var(--dbtu-background-color);
  /* transition: all var(--dbtu-transition-duration); */
}

a,
p,
span,
div,
input {
  font-size: var(--dbtu-font-size);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    Helvetica Neue,
    Arial,
    Noto Sans,
    sans-serif,
    Apple Color Emoji,
    Segoe UI Emoji,
    Segoe UI Symbol,
    Noto Color Emoji;
  font-weight: 400;
}

.monaco-editor span {
  font-family: Consolas, 'Courier New', monospace;
}

a {
  text-decoration: none;
  color: inherit;
}

.dbtu-float-left {
  float: left;
}

.dbtu-float-right {
  float: right;
}

.dbtu-un-user-select {
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

/* When text goes beyond its content, use an ellipsis instead */
.dbtu-text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Center vertically, If the parent element must be set position */
.dbtu-vertical-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/**
 * The css style variable here is not the final result.
 * Which is modified according to the theme Settings in the 'SystemSettingStore.ts' file
 */
:root {
  --dbtu-transition-duration: 0.3s;

  --dbtu-font-size: 14px;
  --dbtu-font-size-large: calc(var(--dbtu-font-size) + 2px);

  --dbtu-theme-color: #409eff;
  --dbtu-theme-hover-color: #79bbff;
  --dbtu-theme-active-color: #337ecc;
  --dbtu-theme-disabled-color: #a0cfff;
}

.dbtu-common-theme {
  --el-bg-color: var(--dbtu-background-color);
  --el-bg-color-overlay: var(--dbtu-background-color);

  --el-text-color-primary: var(--dbtu-font-color);
  --el-text-color-regular: var(--dbtu-font-color);

  --el-font-size-large: var(--dbtu-font-size-large);

  --el-border-radius-base: var(--dbtu-border-radius);
  --el-border-radius-small: var(--dbtu-border-radius);
  --el-border-color: var(--dbtu-border-color);
  --el-border-color-hover: var(--dbtu-theme-color);
  --el-border-color-light: var(--dbtu-background-color-dark);
  --el-border-color-lighter: var(--dbtu-border-color);

  --el-color-primary: var(--dbtu-theme-color);
  --el-color-primary-light-3: var(--dbtu-theme-hover-color);
  --el-color-primary-light-5: var(--dbtu-theme-disabled-color);
  --el-color-primary-dark-2: var(--dbtu-theme-active-color);

  --el-fill-color-blank: var(--dbtu-background-color);
  --el-fill-color-light: var(--dbtu-theme-color);
}

/* region browser scrollbar style start */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.3);
  border-radius: 10px;
  transition: all 0.2s ease-in-out;
  opacity: 0.3;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
}
/* endregion browser scrollbar style end */
